<template>
  <div id="v-event-group">
    <el-select v-model="value" placeholder="请选择" filterable>
      <el-option-group
        v-for="group in dataOptions"
        :key="group[groupLabel]"
        :label="group[groupLabel]">
        <el-option
          v-for="item in group.options"
          :key="item[itemKey]"
          :label="item[itemValue]"
          :value="item[itemKey]">
        </el-option>
      </el-option-group>
      <div id="selectBtn">
        <el-button @click="isShow = !isShow" size="mini">
          筛选
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </el-button>
        <el-button icon="iconfont icon-optimise"  size="mini" class="iconBtn"></el-button>
        <div v-show="isShow" class="selectDrop el-popover el-popper">
          <ul>
            <li v-for="(item,index) in options" :key="item.label" @click="select(index)" :class="{ isSelect: item.isSelect}" class="el-select-dropdown__item">
              {{item.label}}
            </li>
            <li @click="reset"  class="el-select-dropdown__item">重置</li>
          </ul>
        </div>
      </div>
    </el-select>
  </div>
</template>

<script>
  export default {
    model: {
      modeValue: '',
      event: 'change'
    },
    props: {
      options: Array,
      itemKey: {
        type: String,
        default: 'value'
      },
      itemValue: {
        type: String,
        default: 'label'
      },
      groupLabel: {
        type: String,
        default: 'label'
      }
    },
    data () {
      return {
        value: '',
        isShow: false,
        midOptions: [ ],
        dataOptions: [ ]
      }
    },
    watch: {
      value: function () {
        this.$emit('change', this.value)
      }
    },
    methods: {
      select (index) {
        this.midOptions[index].isSelect = !this.midOptions[index].isSelect
        this.dataOptions = this.options.filter((item) => {
          return item.isSelect === true
        })
        if (this.dataOptions.length === 0) {
         this.dataOptions.push({
           label: '任意城市',
           isSelect: true,
           options: [{
             value: 'Shanghai',
             label: '任意城市'
           }]
         })
        }
      },
      reset () {
        this.midOptions = this.options.map((item) => {
          item.isSelect = true
          return item
        })
        this.dataOptions = this.midOptions
      }
    },
    mounted () {
      this.midOptions = this.options
      this.dataOptions = this.midOptions
      this.value = this.modeValue
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .el-scrollbar,.el-scrollbar__wrap
    overflow visible!important
    padding 0 15px 15px 0
    min-width 400px
  .el-select-group__wrap:first-child
    margin-top 30px
    width 450px
  .el-scrollbar__wrap
   overflow auto
  #selectBtn
    position absolute
    top 10px
    right 25px
    .selectDrop
      width 167px
      position absolute
      left -25px
    .iconBtn
      position relative
      top 3px
      padding 3px 5px
     .isSelect
      color #c10003
  .el-select-group .el-select-dropdown__item
    display inline-block
</style>
